<template>
    <div>
        <Timeline
            class="boxstyle"
            v-if="data.length > 0"
        >
            <TimelineItem v-for="(item, index) in data" :key="index">
                <p class="time">{{ item.created_at_str }}</p>
                <p class="content">{{ item.action_content }}</p>
                <p class="consultant">
                    <span>{{ item.profession_name }}</span>
                    <span class="c-inr">{{ item.operate_name }}</span>
                    <Badge status="processing" :text="item.action_type_str" ></Badge>
                </p>
            </TimelineItem>
        </Timeline>
    </div>
</template>
<script>
import { patientindexpatientoperatelist } from '@/api/hqapi';
import {mapState} from 'vuex';
export default {
    name: 'journal',
    computed: {
        ...mapState('chatwebsocket/wechat', ['patientInfo'])
    },
    data () {
        return {
            data: []
        };
    },
    methods: {
        getJournal() {
            patientindexpatientoperatelist(
                {
                    patient_user_id: this.patientInfo.id
                }
            ).then(res => {
                this.data = res.list;
            });
        }
    }
};
</script>
<style scoped>
.time {
    font-size: 14px;
    font-weight: bold;
}
.content {
    padding: 10px 0;
}
.consultant {
    color: #9ea7b4;
}
.c-inr {
    margin: 0 10px;
}
@media only screen and (max-width: 1280px) {
    .boxstyle {
        max-height:80px;
        overflow: auto;
    }
}
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
    .boxstyle {
        max-height:180px;
        overflow: auto;
    }
}
@media only screen and (min-width:1441px) {
    .boxstyle {
        max-height:370px;
        overflow: auto;
    }
}


</style>